<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce">
<head>
<link rel="stylesheet" type="text/css" href="/Control/ArquivoExibir.aspx?NomeArquivo=reset.css" media="all" />
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=cufon-yui.js"></script>
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=Proxima_Nova_Rg_700.font.js"></script>
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=jQ-Commerce.js"></script>
<script type="text/javascript">
	$(function () {
		Cufon.replace('#productName, .unavailable-button', {
			fontFamily: 'Proxima Nova Rg'
		});
		$('select').jQSelect();
	});
</script>
<!--[if lte IE 6]>
	<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=DD_belatedPNG_0.0.8a-min.js"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix('img,div,a,input,span');
	</script>
<![endif]-->
<style type="text/css">
#productQuickView { background: #e6e6e6; overflow: hidden; }
#quickcontent { padding: 11px; background: #fff; }
#productImages { float: left; width: 109px; height: 109px; margin-right: 11px; } 
#productImages .thumbs { display: none;  } 
#productImages img { width: 109px !important; height: 109px !important; } 
#productName { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #000; }
#productSelection { margin-top: 11px; font-size: 11px; }
#productSelection em { font-style: normal; color: #fff; font-size: 1px; }
#productSelection em strong { position: relative; left: -3px; font-size: 11px; color: #999;  }
#productSelection .valor-por {  }
#productSelection .valor-de { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#productSelection .valor-dividido { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#productSelection .economia-de { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#quickfooter { padding: 11px; text-align: center; background: #e6e6e6; }
#productBuy .buy-button { display: block; margin: 0 auto; width: 137px; height: 34px; text-indent: -9999px; margin-bottom: 10px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_product_buybutton.png") no-repeat scroll 0 0 transparent; }
#quickfooter select { display: none; }
#quickfooter .jQcustomselect { position: relative; width: 100%; height: 22px; margin-bottom: 10px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_product_opendescription.png") no-repeat scroll right center #1f1f1f; }
#quickfooter .specification { display: none; }
#quickfooter .jQcustomselect a { text-decoration: none; }
#quickfooter .jQcustomselect .jqselectlabel { display: block; width: 100%px; height: 20px; padding: 1px 10px 2px; overflow: hidden; line-height: 20px; color: #fff; font-weight: bold; }
#quickfooter .jQcustomselect .jQSelect { position: absolute; z-index: 5; top: 17px; left: 0; width: 100%; display: none; }
#quickfooter .jQcustomselect .jQSelect li { color: #fff; background: #1f1f1f; cursor: pointer; display: block; padding: 2px 10px; border-bottom: 1px solid #333; }
#quickfooter .jQcustomselect .jQSelect li:hover { background: #fff; color: #1f1f1f; border-bottom: #1f1f1f; }
#quickfooter li.select { height: 16px; margin-bottom: 5px; padding-top: 5px; font-weight: bold; color: #fff; background: #141414; }
.unavailable-button { padding: 4px; font-size: 12px; color: #fff; text-transform:uppercase; background: #666; }
</style>
<title></title>
</head>
<body id="productQuickView">  <!-- o body precisa ser definifo com este ID -->
    <div id="produto">
        
		<div id="quickcontent" class="clearfix">
			<div id="productImages"><vtex.cmc:ProductImage/></div>
			<div id="productName"><vtex.cmc:productName/></div>
			<div id="productSelection"><vtex.cmc:skuPrice/></div>
		</div>
		<div id="quickfooter" class="clearfix">
			<vtex.cmc:stockKeepingUnitSelection />
			<div class="colors clearfix">
				<vtex:contentPlaceHolder id="produtos-similares" />
			</div>
			<div id="productBuy"><vtex.cmc:BuyButton/></div>
		</div>
    </div>
   <vtex.cmc:productQuickView/> <!-- a chamada desse controle carrega todos os JS utilizados pela funcionalidade -->
</body>
</html>